﻿@namespace SwashbucklerDiary.Rcl.Components
@inherits CardComponentBase<DiaryModel>

<div class="m-sheet @Theme elevation-0 rounded-lg m-card m-card--link diary-card elevation-sm-2--active"
     @onclick="HandeOnClick"
     @oncontextmenu="OpenMenu"
     __internal_preventDefault_oncontextmenu>
    <div class="m-list-item m-list-item--dense @Theme" tabindex="-1">
        <div class="m-list-item__content">
            <div class="d-flex align-center">
                <span class="text--secondary mr-3" style="font-size:1.1rem;">
                    @Date
                </span>
                @if (!string.IsNullOrEmpty(weatherIcon))
                {
                    <i class="m-icon mdi diary-card-icon @weatherIcon @Theme ml-2" style="font-size:20px;"></i>
                }

                @if (!string.IsNullOrEmpty(moodIcon))
                {
                    <i class="m-icon mdi diary-card-icon @moodIcon @Theme ml-2" style="font-size:20px;"></i>
                }
            </div>
        </div>
        <div class="m-list-item__action" @onclick:stopPropagation="true">
            @if (Value.Top)
            {
                <i class="m-icon mdi mdi-format-vertical-align-top @Theme"></i>
            }

            <MButton @attributes="activatorAttributes"
                     Icon="true"
                     OnClick="OpenMenu">
                <i class="m-icon mdi mdi-chevron-down @Theme card__menu @(IsActive?"card-list__selected-menu":"")"></i>
            </MButton>
        </div>
    </div>
    <div class="m-divider__wrapper mx-4" style="display:contents;">
        <hr class="m-divider mx-4 @Theme">
    </div>
    <div class="m-list-item m-list-item--three-line @Theme" tabindex="-1">
        <div class="m-list-item__content">
            <div class="m-list-item__title diary-card__title">
                @title
            </div>
            <div class="m-list-item__subtitle">
                @text
            </div>
        </div>
    </div>
    @if (Value.Tags is not null && Value.Tags.Count > 0)
    {
        <div class="px-3 diary-card__tags">
            <div style="white-space: nowrap;width:100%;overflow-x:hidden;">
                @foreach (var item in Value.Tags)
                {
                    <span @key="item.Id" tabindex="0" class="m-chip m-chip--outlined m-chip--no-color @Theme m-size--default mr-2">
                        <div class="m-chip__content">
                            @(item.Name)
                        </div>
                    </span>
                }
            </div>
        </div>
    }
    @if (!string.IsNullOrEmpty(Value.Location))
    {
        <div class="diary-card__location">
            <DiaryInfoButton Icon="mdi-map-marker-outline"
                             Text="@(Value.Location)">
            </DiaryInfoButton>
        </div>
    }
</div>
